{% extends 'base.html' %}
{% load static %}

{% block title %}{{ title }} - 自动化测试平台{% endblock %}

{% block extra_css %}
<style>
    .profile-container {
        display: flex;
        gap: 2rem;
        max-width: 1000px;
        margin: 0 auto;
    }
    
    .profile-sidebar {
        width: 280px;
        flex-shrink: 0;
    }
    
    .profile-main {
        flex: 1;
    }
    
    .profile-card {
        background: var(--card-bg);
        border-radius: var(--radius-lg);
        border: 1px solid var(--border);
        box-shadow: var(--shadow-sm);
        padding: 1.5rem;
        margin-bottom: 1.5rem;
    }
    
    .avatar-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-bottom: 1.5rem;
    }
    
    .avatar {
        width: 120px;
        height: 120px;
        border-radius: 50%;
        border: 3px solid var(--border-light);
        object-fit: cover;
        margin-bottom: 1rem;
    }
    
    .user-name {
        font-size: 1.5rem;
        font-weight: 600;
        color: var(--text-primary);
        margin-bottom: 0.5rem;
    }
    
    .user-role {
        color: var(--text-secondary);
        margin-bottom: 1rem;
    }
    
    .profile-section {
        margin-bottom: 1.5rem;
    }
    
    .section-title {
        font-size: 1.125rem;
        font-weight: 600;
        color: var(--text-primary);
        margin-bottom: 1rem;
        padding-bottom: 0.5rem;
        border-bottom: 1px solid var(--border-light);
    }
    
    .info-item {
        display: flex;
        align-items: center;
        padding: 0.5rem 0;
        gap: 1rem;
    }
    
    .info-icon {
        width: 24px;
        height: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--text-tertiary);
        flex-shrink: 0;
    }
    
    .info-value {
        color: var(--text-secondary);
        word-break: break-word;
    }
    
    .form-group {
        margin-bottom: 1.5rem;
    }
    
    .form-label {
        display: block;
        font-weight: 500;
        color: var(--text-primary);
        margin-bottom: 0.5rem;
    }
    
    .form-control {
        width: 100%;
        padding: 0.75rem;
        border: 1px solid var(--border);
        border-radius: var(--radius-md);
        background-color: var(--card-bg);
        color: var(--text-primary);
        font-size: 1rem;
        transition: border-color var(--transition-fast);
        box-sizing: border-box;
    }
    
    .form-control:focus {
        outline: none;
        border-color: var(--primary);
        box-shadow: 0 0 0 3px rgba(0, 102, 255, 0.1);
    }
    
    .form-control:disabled {
        background-color: var(--border-light);
        cursor: not-allowed;
        color: var(--text-tertiary);
    }
    
    .btn-primary {
        background-color: var(--primary);
        color: white;
        border: none;
        padding: 0.75rem 1.5rem;
        border-radius: var(--radius-md);
        font-weight: 500;
        cursor: pointer;
        transition: background-color var(--transition-fast);
    }
    
    .btn-primary:hover {
        background-color: var(--primary-hover);
    }
    
    .btn-secondary {
        background-color: transparent;
        color: var(--text-secondary);
        border: 1px solid var(--border);
        padding: 0.75rem 1.5rem;
        border-radius: var(--radius-md);
        font-weight: 500;
        cursor: pointer;
        transition: all var(--transition-fast);
    }
    
    .btn-secondary:hover {
        background-color: var(--border-light);
        color: var(--text-primary);
    }
    
    .button-group {
        display: flex;
        gap: 1rem;
        margin-top: 2rem;
    }
    
    @media (max-width: 768px) {
        .profile-container {
            flex-direction: column;
        }
        
        .profile-sidebar {
            width: 100%;
        }
    }
</style>
{% endblock %}

{% block content %}
<div class="profile-container">
    <!-- 侧边栏 - 用户基本信息 -->
    <div class="profile-sidebar">
        <div class="profile-card">
            <div class="avatar-container">
                <img 
                    src="{% if user.profile.avatar %}{{ user.profile.avatar.url }}{% else %}https://via.placeholder.com/120?text={{ user.username|slice:':2'|upper }}{% endif %}" 
                    alt="{{ user.username }}的头像" 
                    class="avatar"
                >
                <h2 class="user-name">{{ user.username }}</h2>
                <p class="user-role">
                    {% if user.is_superuser %}
                        超级管理员
                    {% elif user.is_staff %}
                        管理员
                    {% else %}
                        普通用户
                    {% endif %}
                </p>
            </div>
            
            <div class="profile-section">
                <h3 class="section-title">联系方式</h3>
                <div class="info-item">
                    <div class="info-icon">
                        <i class="fas fa-envelope"></i>
                    </div>
                    <div class="info-value">
                        {{ user.email|default:"未设置" }}
                    </div>
                </div>
                {% if user.profile.phone %}
                <div class="info-item">
                    <div class="info-icon">
                        <i class="fas fa-phone"></i>
                    </div>
                    <div class="info-value">
                        {{ user.profile.phone }}
                    </div>
                </div>
                {% endif %}
            </div>
            
            <div class="profile-section">
                <h3 class="section-title">账户信息</h3>
                <div class="info-item">
                    <div class="info-icon">
                        <i class="fas fa-calendar-alt"></i>
                    </div>
                    <div class="info-value">
                        注册时间: {{ user.date_joined|date:"Y-m-d" }}
                    </div>
                </div>
                <div class="info-item">
                    <div class="info-icon">
                        <i class="fas fa-clock"></i>
                    </div>
                    <div class="info-value">
                        上次登录: {{ user.last_login|date:"Y-m-d H:i"|default:"从未登录" }}
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 主内容区 - 个人设置表单 -->
    <div class="profile-main">
        <div class="profile-card">
            <h2 class="section-title">基本信息</h2>
            <form method="post" enctype="multipart/form-data">
                {% csrf_token %}
                
                <div class="form-group">
                    <label for="id_username" class="form-label">用户名</label>
                    {{ form.username }}
                    <small class="form-text text-text-tertiary">用户名不可修改</small>
                </div>
                
                <div class="form-group">
                    <label for="id_email" class="form-label">电子邮箱</label>
                    {{ form.email }}
                </div>
                
                <div class="form-group">
                    <label for="id_first_name" class="form-label">姓名</label>
                    {{ form.first_name }}
                </div>
                
                <div class="form-group">
                    <label for="id_last_name" class="form-label">姓氏</label>
                    {{ form.last_name }}
                </div>
                
                <div class="form-group">
                    <label for="id_phone" class="form-label">手机号码</label>
                    {{ form.phone }}
                </div>
                
                <div class="form-group">
                    <label for="id_avatar" class="form-label">上传头像</label>
                    <div class="avatar-upload">
                        {{ form.avatar }}
                        {% if user.profile.avatar %}
                        <small class="form-text text-text-tertiary">当前头像: {{ user.profile.avatar.name }}</small>
                        {% endif %}
                    </div>
                </div>
                
                {% if user.is_superuser or user.is_staff %}
                <div class="form-group">
                    <label for="id_is_staff" class="form-label">
                        {{ form.is_staff }}
                        管理员权限
                    </label>
                </div>
                {% endif %}
                
                <div class="button-group">
                    <button type="submit" class="btn-primary">保存设置</button>
                    <a href="{% url 'portal:home' %}" class="btn-secondary">返回首页</a>
                </div>
            </form>
        </div>
        
        <div class="profile-card">
            <h2 class="section-title">安全设置</h2>
            <p class="text-text-secondary mb-4">定期更新密码可以提高账户安全性</p>
            <div class="button-group">
                <a href="{% url 'accounts:password_change' %}" class="btn-primary">修改密码</a>
                <a href="{% url 'accounts:password_reset' %}" class="btn-secondary">忘记密码</a>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    // 表单验证增强
    document.addEventListener('DOMContentLoaded', function() {
        const form = document.querySelector('form');
        if (form) {
            form.addEventListener('submit', function(e) {
                const email = document.getElementById('id_email');
                if (email && email.value && !validateEmail(email.value)) {
                    alert('请输入有效的电子邮箱地址');
                    e.preventDefault();
                    email.focus();
                }
            });
        }
        
        function validateEmail(email) {
            const re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
            return re.test(email);
        }
    });
</script>
{% endblock %}